<template>
  <div class="fans">
    <el-card class="box-card">
      <!-- 头部 -->
      <div slot="header">
        <my-bread>粉丝管理</my-bread>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="粉丝列表" name="first">
          <ul class="fans_ul">
            <li v-for="(item, index) in list" :key="index">
              <el-image
                style="width: 80px; height: 80px;
                border-radius: 50%;"
                :src="item.photo"
              ></el-image>
              <p>{{ item.name }}</p>
              <el-button type="primary" plain>+关注</el-button>
            </li>
          </ul>
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="reqParams.page"
            :page-size="reqParams.per_page"
            layout=" prev, pager, next"
            :total="total"
          >
            >
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="粉丝画像" name="second">
          <div class="excha" ref="reference"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { fansList, fansEcharts } from '@/api/fans'
import echarts from 'echarts'
export default {
  name: 'fans',
  data () {
    return {
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      activeName: 'first',
      reqParams: {
        page: 1,
        per_page: 20
      },
      total: 0,
      list: [],
      arr: [],
      arr2: []
    }
  },
  watch: {
    // 观察option的变化
    option: {
      handler (newValue, oldValue) {
        // alert('新增数据监听')
        if (oldValue !== newValue) {
          this.geteacharts()
        }
      },
      deep: true
    }
  },
  methods: {
    handleClick () {},
    // 分页
    handleCurrentChange (val) {
      this.reqParams.page = val
      this.fansList()
    },
    // 用户信息
    fansList () {
      fansList(this.reqParams).then(res => {
        // console.log('1111', res)
        this.list = res.data.data.results
        this.total = res.data.data.total_count
      })
    },
    // 初始化柱状图
    async initBar () {
      // console.log('zzzz', this.arr)
      const zzz = this.$refs.reference
      var myChart = echarts.init(zzz)
      const option = {
        xAxis: {
          type: 'category',
          data: [
            '小于18岁',
            '小于23岁',
            '小于30岁',
            '小于40岁',
            '小于50岁',
            '大于50岁'
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }
      try {
        const {
          data: { data }
        } = await fansEcharts()
        // console.log(data);
        // const arr1 = []
        const arr2 = []
        for (const item in data.age) {
          // arr1.push(item)
          arr2.push(data.age[item])
        }
        // option.xAxis.data = arr1
        option.series[0].data = arr2
      } catch (e) {
        this.$message.error('网络繁忙，刷新一下')
      }

      myChart.setOption(option)
    }
  },
  created () {
    // 用户信息
    this.fansList()
  },
  mounted () {
    this.initBar()
  }
}
</script>
<style lang="less">
.fans {
  /* 去掉li 的小圆点 */
  li {
    list-style: none;
  }
  .fans_ul {
    li {
      display: inline-block;
      padding-top: 10px;
      text-align: center;
      border: 1px dashed #ccc;
      width: 122px;
      height: 182px;
      margin: 0 30px 30px 0;
      p {
        margin: 10px 0;
      }
    }
  }
  .excha {
    width: 500px;
    height: 500px;
  }
}
</style>
